<template>
    <div class="checkins-cpn">
        <div class="checkins-cpn-box">
            <!-- <div class="box-head">
                <p class="explain">每日签到可获得1L水,</p>
                <p class="explain">灌满16L可以兑换礼品券</p>
            </div> -->
            <div class="box-main">
                <div class="measure">
                    <span class="measure-em">水桶总量</span>
                    <p class="measure-val">16 <em>L</em></p>
                </div>
                <div id="wave" class="bucket-box">
                    <!-- <div class="circle-plan-left"></div>
                    <div class="circle-plan-right"></div> -->
                    <div class="bucket-box-inner">
                    	<canvas id="canvas"></canvas>
                    	<span class="canvas-text">{{nowRangeText}}</span>
                    	<span class="canvas-box-title">当前水量</span>
                    	<input style="display:none;" type="range" id="range" min="0" max="100" step="1">
                    </div>
                </div>
            </div>
            <div>
                <a class="checkins-btn" :class="{'disabled':checkinsBtn == 2}" href="javascript:;" v-on:click="checkinsAction()" :ca="'灌水活动_灌水活动$'+checkinsBtnText">{{checkinsBtnText}}</a>
            </div>
            <a class="bucket-link" v-on:click="checkinsLink" ca="灌水活动_灌水活动$查看我的优惠券">查看我的优惠券</a>
        </div><!-- 
        <div class="content-box">
            <h4 class="content-title">礼包内容</h4>
            <div class="content-text">
                
            </div>
        </div> -->
    </div>
</template>

<script>

import common from "../../../assets/js/common.js";
import {Toast} from 'mint-ui';
export default {
    data: function() {
        return {
        	area: {
	    		longitude: '',
            	latitude: '',
            	cityName: ''
	    	},
            nowRangeVal:0,//当前水量
            nowRangeText:'',//当前水量显示文本
            pageUrl:window.location.href,
            checkinsBtnText:'签到灌水',
            checkinsBtn: 1//1未签到 2 已签到  3 可兑券

        }
    },
  	created: function (){
  		var _this = this;
  		
        
	},
    methods: {
        //去券列表
        checkinsLink:function(){
            /*var host = window.location.host;
            var cxjappHost = "";
            if (host.indexOf("sit") > -1) {
                cxjappHost = "//cxjapp.chexiangsit.com";
            }else if (host.indexOf("pre") > -1) {
                cxjappHost = "//cxjapp.chexiangpre.com";
            }else  {
                cxjappHost = "//cxjapp.chexiang.com";
            }
            window.location.href = cxjappHost+"/service/usercoupon/getUserCouponList/1?couponType=1&userId=";*/
        	var env = process.env.NODE_ENV;
        	var urlMap = {
                'prod':'//h.jia.chexiang.com/cx/cxj/cxjappweb/coupon/index.shtml#/',
                'pre':'//h.jia.chexiangpre.com/cx/cxj/cxjappweb/coupon/index.shtml#/',
                'sit':'//h.jia.chexiangsit.com/cx/cxj/cxjappweb/coupon/index.shtml#/'
           };
        	var myCpnListUrl = urlMap[env]||urlMap['prod'];
        	myCpnListUrl = myCpnListUrl + "?userInfo=" + sessionStorage.getItem("userInfo");
        	window.location.href = myCpnListUrl;
        },
        checkinsAction: function () {
        	var _this = this;
        	//1未签到 2 已签到  3 可兑券
        	if (this.checkinsBtn == 3) {
        		lb.geolocation(function (data) {
		            if (data.errorCode == 0) {
		                var longitude = data.text.longitude ? data.text.longitude : "";
		                var latitude = data.text.latitude ? data.text.latitude : "";
		                var cityName = data.text.cityName ? data.text.cityName : "";
		                sessionStorage.setItem("global_longitude", longitude);
		                sessionStorage.setItem("global_latitude", latitude);
		                sessionStorage.setItem("global_cityName", cityName);
		                console.log("global_longitude:"+longitude);
		                console.log("global_latitude:"+latitude);
		                console.log("global_cityName:"+cityName);
		                _this.cutPage();
		            }else if(data.errorCode==-1){
		                sessionStorage.setItem("global_longitude", "");
		                sessionStorage.setItem("global_latitude", "");
		                sessionStorage.setItem("global_cityName", "");
		            }
		            
		        });
        	}else if (this.checkinsBtn == 2) {
        		//不做任何处理
        	}else if (this.checkinsBtn == 1) {
        		this.checkins();
        	}
        },
        //页面切换
        cutPage:function(pageType){
            //去兑券列表
        	window.location.href = this.pageUrl + '#/checkinsCpnList';
			
        },
        
        checkins:function(){
            var _this = this;
            _this.$http.post(common.isdev() + '/water/addWater.htm').then(function(d) {
                var data = typeof d.data === 'object' ? d.data : JSON.parse(d.data);
                //验证登录
                if(data.result == -99){
                    common.goLogin();
                }else{
                    if(data.result == 1){//灌水成功
                    	this.nowRangeVal = ((data.obj.waterAmount / 1000) / 16 * 100)/100;
                        //_this.nowRangeVal = (data.obj.waterAmount / 1000) / 16 * 100;//换算升数
                        _this.nowRangeText = (data.obj.waterAmount / 1000).toFixed(2) + 'L';//文本赋值

                        if(data.obj.waterAmount >= 16000){
                        	_this.checkinsBtn = 3;
                            _this.checkinsBtnText = '水箱满了，去兑换券';
                        }else{
                        	_this.checkinsBtn = 2;
                            _this.checkinsBtnText = '今日已签到';
                        }
                        _this.$parent.addWaterNum = data.obj.todayWaterAmount;
                        _this.$emit('popShow');
                    }else if(data.result == 0){//灌水失败
                        Toast(data.msg);
                    }
                }
                
                
            }, function(err) {
                Toast("网络不给力");
            });
        },
        //接收来自父组件请求后的数据
        measureInject:function(data,btnType){
        	//页面初始化  初始化水桶参数
        	if (data) {
        		if(data.obj.partInToday){
	        	 	this.checkinsBtn = 2;
	        	 	this.checkinsBtnText = "今日已签到";
	        	}
	            if(data.obj.waterAmount >= 16000){
	                this.checkinsBtn = 3;
	                this.checkinsBtnText = '水箱满了,去兑换券';
	            }
	            //初始化水桶参数
                if(data.obj.waterAmount > 16000){
                    data.obj.waterAmount = 16000;
                }
                console.log(data.obj.waterAmount);
	            this.nowRangeVal = ((data.obj.waterAmount / 1000) / 16 * 100)/100;
	            //this.nowRangeVal = (data.obj.waterAmount / 1000) / 16 * 100;
	            this.nowRangeText = (data.obj.waterAmount / 1000).toFixed(2) + 'L';
        	}
        	//重新渲染水桶
            this.bucket(this.nowRangeVal,this.nowRangeText);
            
            //打点
            common.ANA_AnalyticsScan();
        },
        //水桶计算
        bucket:function(nowRangeVal,nowRangeText){
			
            var ctx;
            var waveImage;
            var canvasWidth;
            var canvasHeight;
            var needAnimate = false;

            function init (callback) {
                var wave = document.getElementById('wave');
                var canvas = document.getElementById('canvas');
                if (!canvas.getContext) return;
                ctx = canvas.getContext('2d');
                canvasWidth = wave.offsetWidth;
                canvasHeight = wave.offsetHeight;
                canvas.setAttribute('width', canvasWidth);
                canvas.setAttribute('height', canvasHeight);
                waveImage = new Image();
                waveImage.onload = function () {
                    waveImage.onload = null;
                    callback();
                }
                waveImage.src = '//s1.cximg.com/msweb02/cx/cxj/cxjweb/static/image/wave.png';
                console.info('processEnv:'+JSON.stringify(process.env));
                console.info('process:'+JSON.stringify(process));
                console.info('process.argv[3]:'+JSON.stringify(process.argv));

            }

            function animate () {
                var waveX = 0;
                var waveY = 0;
                var waveX_min = -203;
                var waveY_max = canvasHeight * nowRangeVal;
                var requestAnimationFrame = 
                    window.requestAnimationFrame || 
                    window.mozRequestAnimationFrame || 
                    window.webkitRequestAnimationFrame || 
                    window.msRequestAnimationFrame ||
                    function (callback) { window.setTimeout(callback, 1000 / 60); };
                function loop () {
                    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                    if (!needAnimate) return;
                    if (waveY < waveY_max) waveY += 1.5;
                    if (waveX < waveX_min) waveX = 0; else waveX -= 3;
                    
                    ctx.globalCompositeOperation = 'source-over';
                    ctx.beginPath();
                    ctx.arc(canvasWidth/2, canvasHeight/2, canvasHeight/2, 0, Math.PI*2, true);
                    ctx.closePath();
                    ctx.fill();

                    ctx.globalCompositeOperation = 'source-in';
                    ctx.drawImage(waveImage, waveX, canvasHeight - waveY);
                    
                    requestAnimationFrame(loop);
                }
                loop();
            }

            function start () {
                if (!ctx) return init(start);
                needAnimate = true;
                setTimeout(function () {
                    if (needAnimate) animate();
                }, 500);
            }
            function stop () {
                needAnimate = false;
            }

            start();
            return {start: start, stop: stop};

        }
    }
}
   
</script>


<style lang="scss" scoped>
 
@import '../../../assets/css/common.scss';    

@function rem($px){
  @return $px / 10 * 1rem;
}
$color-mian:#f7b5bc;
html,body{
    height:100%;
}
body {
    background: #f4f4f4;
}
.checkins-cpn{
    border-radius:10px;
    background-color:#fff;
    padding:rem(30 / 2) rem(54 / 2) rem(42 / 2) rem(54 / 2);
}
.checkins-cpn-box{
    .box-head{
        border-bottom:1px solid $color-mian;
        padding-bottom:rem(22 / 2);
    }
    .explain{
        color:$color-mian;
        font-size:rem(14);
        text-align:center;
    }
}
.checkins{
    
}
//测量底图
.box-main{
	position: relative;
    padding-top:rem(75 / 2);
    padding-bottom:rem(50 / 2);
    overflow:hidden;
    .measure{
        width:rem(106 / 2);
        height:rem(339 / 2);
        background:url('../../../assets/image/qdgs/checkins-icon.png') no-repeat;
        background-size:100% 100%;
        position:relative;
        float:left;
        margin-right:rem(20 / 2);
        .measure-em{
            font-size:rem(22 / 2);
            display:block;
            color:#6c6c6c;
            position:absolute;
            top:rem(130 / 2);
        }
        .measure-val{
            position:absolute;
            top:rem(150 / 2);
            font-size:rem(50 / 2);
            color:#f9665b;
            em{
                font-size:rem(30 / 2);
                margin-left:rem(-7);
            }
        }
    }
}
.bucket-link{
    font-size:rem(24 / 2);
    color:#0084ff;
    text-align:center;
    display:block;
    
}
.checkins-btn{
    width:rem(520 / 2);
    height:rem(78/ 2);
    line-height:rem(78 / 2);
    display:block;
    text-align:center;
    font-size:rem(32 / 2);
    color:#fff;
    background-color:#fa3348;
    border-radius:5px;
    box-shadow:1px 4px 10px rgba(167, 167, 167, 0.4);
    margin: 0 auto rem(22 / 2) auto;
}
.checkins-btn.disabled{ 
	background: #ccc;
}
//水桶

/*
.bucket-box{
    float:left;
    position:relative;
    width: rem(340 / 2);
    height: rem(340 / 2);
    padding:rem(15 / 2);
    border-top-left-radius: 999px; 
    border-top-right-radius: 999px; 
    border-bottom-right-radius: 999px; 
    border-bottom-left-radius: 999px; 
    border-radius: 999px;
    background-clip: padding-box;
    border:rem(20 / 2) solid #6fc9f3 !important;
    box-shadow:1px 4px 8px rgba(167, 167, 167, 0.8);
    overflow: hidden;
}*/
.bucket-box{
    position:absolute;
    left: 50%;
    margin-left: -8.5rem;
    width: 17rem;
    height: 17rem;
    border-top-left-radius: 999px; 
    border-top-right-radius: 999px; 
    border-bottom-right-radius: 999px; 
    border-bottom-left-radius: 999px; 
    border-radius: 999px;
    border: 1rem solid #6fc9f3 !important;
    box-shadow:1px 4px 8px rgba(167, 167, 167, 0.8);
    overflow: hidden;
    background-clip: border-box;
    background: #6fc9f3;
    box-sizing: border-box;
}
.bucket-box-inner {
    height: 100%;
    padding: 0.75rem;
    background: #ffffff;
    border-top-left-radius: 999px;
  	border-top-right-radius: 999px;
	border-bottom-right-radius: 999px;
	border-bottom-left-radius: 999px;
	border-radius: 999px;
	box-sizing: border-box;
}
//圆形进度条
.circle-plan-right{
    width: rem(340 / 2);
    height: rem(340 / 2);
    position:absolute;
    border-radius: 100px;
    border:rem(20 / 2) solid #fd6c4c;
    top:rem(-20 / 2);
    left:rem(-20 / 2);
    clip:rect(0,auto,auto,100px);
}
.circle-plan-left{
    width: rem(340 / 2);
    height: rem(340 / 2);
    position:absolute;
    border-radius: 100px;
    border:rem(20 / 2) solid #fd6c4c;
    top:rem(-20 / 2);
    left:rem(-20 / 2);
    clip:rect(0,100px,auto,0);
}
#bucket{
    width:rem(275 / 2);
    height:rem(275 / 2);
    border-radius: 100px;
    box-shadow:2px 5px 10px rgba(167, 167, 167, 0.3);
}
.canvas-box-title{
    position:absolute;
    font-size:rem(30 / 2);
    color:#2f6f79;
    top:rem(190 / 2);
    left:0;
    right:0;
    margin:auto;
    text-align:center;
}
#c,#range{
margin: 0 auto;
display: block;
}
#r::before{
color: black;
content: attr(min);
padding-right: 10px;
}
#r::after{
color: black;
content: attr(max);
padding-left: 10px;
}
//内容层
.content-box{
    position:relative;
    padding-top:rem(26 / 2);
    .content-title{
        width:rem(450 / 2);
        font-size:rem(28 / 2);
        color:#a0a0a0;
        position:relative;
        margin:0 auto;
        text-align:center;
    }
    .content-title::after,.content-title::before{
        content:'';
        width:rem(120 / 2);
        height:1px;
        border-top:1px solid #a0a0a0;
        position:absolute;
        top:0;
        bottom:0;
        margin:auto 0;
    }
    .content-title::after{
        left:0;
    }
    .content-title::before{
        right:0;
    }
}
.content-box::after,.content-box::before{
    content:'';
    width:rem(90 / 2);
    height:rem(90 / 2);
    display:block;
    border-radius:30px;
    background-color:#ff695b;
    position:absolute;
    top:0;
}
.content-box::after{
    left:rem(-100 / 2);
}
.content-box::before{
    right:rem(-100 / 2);
}
.content-text{
    height:rem(370 / 2);
    padding:0 rem(65 / 2);
}

.canvas-text{
    position:absolute;
    display:block;
    font-size:rem(70 / 2);
    left:0;
    right:0;
    margin:auto;
    top:rem(95 / 2);
    text-align:center;
    color:#2f6f79;
}
/*
.wave{
	width:200px;
	height:200px;
	overflow:hidden;
	border-radius:50%;
	background:rgba(255,203,103,.6);
	margin:100px auto;
	position:relative;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
	}
.wave span{
	display:inline-block;
	color:#fff;
	font-size:20px;
	position:relative;
	z-index:2;
	}*/
#wave canvas{
	width:13.75rem;
	height:13.75rem;
	z-index:1;
	margin-top: -0.1rem;
	margin-left: -0.1rem;    
	border-radius: 50%;
}
</style>

